/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
Ext.onReady(function() {
    var isNew = false;
    var id;
    Ext.QuickTips.init(); // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var ds = new Ext.data.Store({
        remoteSort: true,
        sortInfo: {
            field: 'id',
            direction: 'ASC'
        },
        proxy: new Ext.data.HttpProxy({
            url: 'category/all'
        }),
        reader: new Ext.data.JsonReader({
            root: 'categories',
            totalProperty: 'totalCount',
            id: 'id'
        },
        [{
            name: 'id'
        },
        {
            name: 'area_id'
        },
        {
            name: 'area_en'
        },
        {
            name: 'name_mk'
        },
        {
            name: 'name_en'
        },
        {
            name: 'description',
            mapping: 'description'
        }])
    });
    var area_store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'category/areas'
        }),
        reader: new Ext.data.JsonReader({
            root: 'areas',
            totalProperty: 'totalCount',
            id: 'id'
        },
        [{
            name: 'id'
        },
        {
            name: 'name_en'
        },
        {
            name: 'short'
        },
        {
            name: 'description'
        }])
    });
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: ds,
        displayInfo: true,
        displayMsg: 'Displaying categories {0} - {1} of {2}',
        emptyMsg: "No categories to display"
    }); // create the grid
    var grid = new Ext.grid.GridPanel({
        store: ds,
        columns: [{
            header: "Name Mk",
            width: 150,
            dataIndex: 'name_mk',
            sortable: true
        },
        {
            header: "Name En",
            width: 150,
            dataIndex: 'name_en',
            sortable: true
        },
        {
            header: "Area",
            width: 150,
            dataIndex: 'area_en',
            sortable: true
        },
        {
            header: "Description",
            width: 250,
            dataIndex: 'description',
            sortable: true
        }],
        renderTo: 'data-grid',
        width: 700,
        height: 300,
        title: 'Categories',
        frame: true,
        loadMask: true,
        bbar: pagingBar,
        viewConfig: {
            forceFit: true
        }
    });
    grid.on('rowclick',
    function(grid, rowIndex, e) {
        isNew = false;
        var record = ds.getAt(rowIndex);
        fs.getForm().loadRecord(record);
        id = record.get('id');
    });
    var fs = new Ext.FormPanel({
        frame: true,
        title: 'Category Details',
        labelAlign: 'right',
        labelWidth: 85,
        width: 340,
        waitMsgTarget: true,
        renderTo: 'data-form',
        items: [new Ext.form.FieldSet({
            title: 'Category Information',
            autoHeight: true,
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Name Mk',
                name: 'name_mk',
                allowBlank: false,
                blankText: 'This field is required.',
                width: 190
            },
            {
                fieldLabel: 'Name En',
                name: 'name_en',
                allowBlank: false,
                blankText: 'This field is required.',
                width: 190
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Area',
                hiddenName: 'area_id',
                store: area_store,
                valueField: 'id',
                displayField: 'name_en',
                typeAhead: true,
                mode: 'local',
                editable: false,
                triggerAction: 'all',
                emptyText: 'Select area...',
                selectOnFocus: true,
                allowBlank: false,
                blankText: 'This field is required.',
                width: 190
            }), {
                fieldLabel: 'Description',
                name: 'description',
                width: 190
            }]
        })],
        buttonAlign: 'left',
        buttons: [{
            text: 'Save',
            handler: function() {
                if (isNew) {
                    id = 0;
                }
                fs.getForm().submit({
                    url: 'category/edit',
                    params: {
                        'id': id
                    },
                    success: successFn,
                    waitMsg: 'Saving Data...'
                });
            }
        },
        {
            text: 'New',
            handler: function() {
                isNew = true;
                fs.getForm().reset();
            }
        },
        {
            text: 'Delete',
            handler: function() {
                Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete the record?', showResult);
            }
        }]
    });
    area_store.load();
    ds.load({
        params: {
            start: 0,
            limit: 25
        }
    });
    ds.on('load',
    function() {
        var record = ds.getAt(0);
        fs.getForm().loadRecord(record);
        id = record.get('id');
    });
    function showResult(btn) {
        if (btn == 'yes') {
            Ext.Ajax.request({
                url: 'category/delete',
                success: successFn,
                params: {
                    'id': id
                },
                waitMsg: 'Delete Data...'
            });
        }
    };
    function successFn() {
        ds.load({
            params: {
                start: 0,
                limit: 25
            }
        });
    }
});